<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <!--1.添加视口标签 快捷方式：meta:vp -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--2.设置网页渲染模式  快捷方式：meta:compat  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--3.把bootstrap 核心样式（压缩版）引入-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
    <style type="text/css">
{#        #id_username {#}
{#            width: auto;#}
{#            height: auto;#}
{#        }#}
{##}
{#        td {#}
{#            height: 30px;#}
{##}
{#        }#}
    </style>
</head>
<body style="background-color: #5cb85c">
<div style="text-align: right">
    {% if request.user.is_authenticated %}
        <span>用户名:<span id="user_name">{{ request.user }}</span>  </span><span style="color: #5cb85c">  </span>
    {% else %}
        <span style="color: red">登录/注册 /<a href="/accounts/logout">注销</a></span>
    {% endif %}
    <span style="color: red"><a href="/accounts/logout" style="color: red">注销</a></span>
</div>
<div style="text-align: center">
    <h1 style="text-align: center;">上传文件</h1>
    <form class="form-horizontal" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="id_username" class="col-sm-2 control-label">用户名:</label>
            <div class="col-sm-10">
                <input type="text" name="username" id="id_username" required=""
                                          value="admin"></div>
        </div>
        <p><label for="id_headImg">Headimg:</label> <input type="file" name="headImg" id="id_headImg" required=""></p>
        <input class="btn btn-default" type="submit" style="" value="点击开始上传"/>
    </form>
    <h1 style="color: red;">{{ put }}</h1>
    <h1 style="text-align: center">历史上传记录</h1>
    <table border="1" style="text-align: center;position: relative;left: 40%">
        <tr>
            <td>上传者</td>
            <td>文件名</td>
        </tr>
        {% for i in data %}
            <tr>
                <td>{{ i.username }}</td>
                <td>{{ i.headImg }}</td>
            </tr>
        {% endfor %}
    </table>

</div>
<!--4.把jQuery 引入-->
<script src="/static/js/jquery-1.10.2.min.js"></script>
<!--5.把bootstrap 核心脚本文件（压缩版）引入-->
<script src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var username = document.getElementById('user_name');
    var usernames = username.innerHTML;
    var id_username = document.getElementById('id_username');
    console.log(id_username);
    //id_username.setAttribute('disabled','');
    id_username.setAttribute('value', usernames);


</script>
</body>
</html>